/* cyrillic-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://fonts.gstatic.com/s/opensans/v35/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4taVIGxA.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
  }
  /* cyrillic */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://fonts.gstatic.com/s/opensans/v35/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4kaVIGxA.woff2) format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
  }
  /* greek-ext */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://fonts.gstatic.com/s/opensans/v35/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4saVIGxA.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
  }
  /* greek */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://fonts.gstatic.com/s/opensans/v35/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4jaVIGxA.woff2) format('woff2');
    unicode-range: U+0370-03FF;
  }
  /* hebrew */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://fonts.gstatic.com/s/opensans/v35/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4iaVIGxA.woff2) format('woff2');
    unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
  }
  /* vietnamese */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://fonts.gstatic.com/s/opensans/v35/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4vaVIGxA.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://fonts.gstatic.com/s/opensans/v35/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4uaVIGxA.woff2) format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    src: url(https://fonts.gstatic.com/s/opensans/v35/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsjZ0B4gaVI.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  

/*

    Template Name   : mytouch – Personal Responsive Template v1.0 .

    Template URI    : http://mytouch.eb2a.com

    Description     : Personal .

    Author          : Mohamed Alaa Abas

    Author URI      : https://themeforest.net/user/mohamedb 

    Author Facebook : https://www.facebook.com/profile.php?id=100004522147924 

    Author Email    : mohamed_ll14@yahoo.com .



Table of contents]



1. Header

    1.1 Navigation / nav



2. Home Page Background



3. About

	3.1. About Me

	3.2. Download CV



4. Service 

  

5. Portfolio

	4.1. Project Details

6. Work For Company 



7. Footer 



**/

*{

    -ms-box-sizing: border-box;

    -o-box-sizing: border-box;

    box-sizing: border-box;

}

/*--------------------------------------------

              Body And Scroll Design

---------------------------------------------*/

body{

    font-family: 'Open Sans', sans-serif;

    overflow-x: hidden;

    width: 100%;

    height: 100%;

}

/* paleGreenScroll */

body::-webkit-scrollbar {

    width: .4em;

}

body::-webkit-scrollbar-track {

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);

} 

body::-webkit-scrollbar-thumb {

  background-color: #777;

  outline: 1px solid #333;

}

/* End Scroll */



strong{ 

    font-family: 'Open Sans', sans-serif;



}

/* Button*/

.btn-kotoby,

.btn-kotobydown{

    background-color: transparent;

    border: 1px solid #7b7b7b;

    font-size: 16px;

    text-transform: uppercase;

}

.btn-sub-kotoby{

    background-color: transparent;

    border: 1px solid #7b7b7b;

    text-transform: capitalize;

    margin: 10px;

}

/* End Botton*/

/*--------------------------------------------

              Start Navbar

---------------------------------------------*/

.navbar-default{

    /* navbar color */

    background: transparent;

    border: none;

    padding: 25px 0 10px 0;

    margin-bottom: 0;

    -webkit-transition:all .3s ease-in-out;

    transition:all .3s ease-in-out;

}

.navbar-default .navbar-toggle .icon-bar {

    background-color: rgba(238, 238, 238, 0.72);

}

/* start navbar color for name project */

.navbar-default .navbar-brand {

    color: #fff;

    font-size: 23px;

    font-weight: 600;

    letter-spacing: 1px;

}

/* end navbar color for name project */

.navbar-default .navbar-nav  li:last-of-type{

    padding-right: 40px;

}

/* color a */

.navbar-default .navbar-nav > li > a {

    color: #fff;

    font-weight: bold;

    text-transform: capitalize;

}

/* link when Hover  */

.navbar-default .navbar-nav > li > a:hover,

.navbar-default .navbar-nav > li > a:focus {

    color: #FFF;

    background-color: transparent;

}

.navbar-default .navbar-nav > .active > a,

.navbar-default .navbar-nav > .active > a:hover,

.navbar-default .navbar-nav > .active > a:focus 

{   /* navbar when active, hover and foucus */

    color: #DDD;

    border-bottom: 2px solid #0ff;

}

/* end navbar for bootstrap*/

.navscroll{

    background: #fff;

    top: 0;

    padding: 4px;

    margin-top: 0px;

    box-shadow: 0 15px 60px rgba(218, 216, 216, 0.84);

    -webkit-transition:all .3s ease-in-out;

    transition:all .3s ease-in-out;

}

.color-link{

    color: #333 !important;

}

.padding-nav{

    padding: 15px 0;

    -webkit-transition:all .7s ease-in-out;

    transition:all .7s ease-in-out;

}

/*---------------------------------------------

                End Navbar

-----------------------------------------------*/



/*---------------------------------------------

               Start Home Page 

-----------------------------------------------*/

.home-page{

    width: 100%;

    height: 100%;

    top: 0;

    color: #fff;

    overflow: hidden;

}

.sub-container h1,

.sub-container h2{

    color: #fff;

    letter-spacing: 1px;

}

.sub-container h2{

    font-size: 29px;

}

.sub-container h1{

    margin-bottom: 30px;

    text-transform: uppercase;

}

.sub-container .btn-kotoby{

    padding: 15px 35px;

    margin: 20px 15px;

    margin-left: 0px;

}

.sub-container .btn-kotobydown{

    font-size: 16px;

    padding: 15px 22px;

}

.sub-container .btn-kotoby,

.sub-container .btn-kotobydown{

    color: #fff;

    font-weight: 600;

    letter-spacing: 2px;

}

.btn-kotobydown:hover i{

    animation: move 1.1s ease-in-out infinite;

}



@keyframes move {

     100%{

        -webkit-transform: translateY(7px); 

        transform: translateY(7px);

    }

}

/* -----------------------------------------------

               End Home Page

--------------------------------------------------*/



/*------------------------------------------------

              start about Page 

--------------------------------------------------*/

.about .container h2:before{

    content: "";

    position: absolute;

    border-width: 1px;

    padding-left: 144px;

    border-color: transparent transparent #333;

    padding-bottom: 12px;

    margin-top: 25px;

    border-style: solid;

}

.about .container  img{

    max-width: 100%;

    height: auto;

    margin-bottom: 20px;

}

.about .container  h2{

    margin-bottom: 25px;

    margin-top: 15px;

    font-weight: 600;

    text-transform: uppercase;

    margin-bottom: 20px;

}

.about .container .sub-p{

    padding: 16px 0;

    /* line-height: 30px; */

    



}

.about .container .sub-text{

    color: #222;

    line-height: 30px;

    margin-top: 25px;

}

.about .container a{

    color: #000;

    text-decoration: none;

    font-size: 15px;

    padding: 0 5px;

    font-weight: 600;

}

.about .container a:hover{

    text-decoration: line-through;

}

/*--------------------------------------------------

               End about Page

----------------------------------------------------*/



/*---------------------------------------------------

               Start Service

-----------------------------------------------------*/

/* Width For After In Service*/

.service .container h2:before{

    content: "";

    position: absolute;

    border-width: 1px;

    padding-left: 133px;

    border-color: transparent transparent #333;

    padding-bottom: 12px;

    margin-top: 25px;

    border-style: solid;

}



.service .row h2 strong{

    font-size: 24px;

    letter-spacing: 20px

}

.service .row h4{

    font-size: 18px;

    font-weight: 600;

}

.service .row .sub-text{

    font-size: 14px;

    line-height: 30px;

    letter-spacing: 1px;

}

.service i{

    color: #ffffff;

    margin-bottom: 15px;

}

/*----------------------------------------------------

                  End Service

------------------------------------------------------*/



/*----------------------------------------------------

                  Start Portfolio 

------------------------------------------------------*/



/* Width For After In Portfolio*/

.portfolio .container h2:before{

    content: "";

    position: absolute;

    border-width: 1px;

    padding-left: 187px;

    border-color: transparent transparent #333;

    padding-bottom: 12px;

    margin-top: 25px;

    border-style: solid;

}

.box{

    position: relative;

    overflow: hidden;

    text-align: center;

    color: #fff;

    margin-bottom: 30px;



}

.box img{

    width: 100%;

    height: auto;

}

.box .icon a:focus {

    outline: none;

}

.box:before{

    content: "";

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    background: rgba(0, 0, 0, 0.2);

    transition: all 0.3s ease 0s;

}

.box:hover:before{

    background: rgba(0, 0, 0, 0.5);

}

.box .box-content{

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    padding: 120px 0;

    z-index: 1;

    transition: all 0.3s ease 0s;

}

.box .box-content:before{

    content:"";

    border-left: 1px solid #fff;

    border-right: 1px solid #fff;

    position: absolute;

    top: 100%;

    left: 30px;

    bottom: 15px;

    right: 30px;

    opacity: 0;

    z-index: -1;

    transition: all 0.3s ease 0.3s;

}

.box:hover .box-content:before{

    top: 15px;

    opacity: 1;

}

.box .box-content:after{

    content:"";

    border-top: 1px solid #fff;

    border-bottom: 1px solid #fff;

    position: absolute;

    top: 30px;

    left: 15px;

    bottom: 30px;

    right: 15px;

    opacity: 0;

    z-index: -1;

    transform: skew(-100deg);

    transition: all 0.3s ease 0s;

}

.box:hover .box-content:after{

    opacity: 1;

    transform: skew(0deg);

}

.box:hover .box-content{

    background: rgba(14, 14, 14, 0.39);

}

.box .title{

    margin: 30px 0 20px 0;

    font-size: 25px;

    font-weight: 700;

    transition: all 0.3s ease 0s;

    letter-spacing: 1px;

}

.box:hover .title{

    margin-top: 10px;

}

.box .post{

    display: block;

    font-size: 14px;

    text-transform: capitalize;

    margin-bottom: 30px;

    opacity: 0;

    letter-spacing: 1px;

    transition: all 0.3s ease 0s;

}

.box .icon{

    padding: 0;

    margin: 0;

    list-style: none;

    width: 100%;

}

.box .icon li{

    display: inline-block;

}

.box .icon li a{

    display: inline-block;

    width: 30px;

    height: 30px;

    line-height: 30px;

    border-radius: 50%;

    background: rgba(36, 36, 36, 0.53);

    color: #fff;

    margin-right: 10px;

    opacity: 0;

    z-index: 1;

    transition: all 0.3s ease 0s;

}

.box .icon li a:hover{

    background: #333;

}

.box:hover .post,

.box:hover .icon a{

    opacity: 1;

}

/*------------------------------------------------------

                End Portfolio

--------------------------------------------------------*/

.TESTIMONIALS{

    padding: 10px 0;

}

.TESTIMONIALS h2{

    letter-spacing: 4px;

}

.TESTIMONIALS h2:before{

    content: "";

    position: absolute;

    border-width: 1px;

    padding-left: 180px;

    border-color: transparent transparent #333;

    padding-bottom: 12px;

    margin-top: 25px;

    border-style: solid;

}

#quote-carousel{

    padding: 0 10px 30px 10px;

    margin-top: 30px;

}

#quote-carousel .carousel-indicators{

    right: 50%;

    top: auto;

    bottom: 0px;

    margin-right: -19px;

}

#quote-carousel .carousel-indicators li{

    background: #c0c0c0;

}

#quote-carousel .carousel-indicators .active {

    background: #333333;

}

#quote-carousel img{

    width: 120px;

    height: 120px;

    
}
.carousel {
    overflow-y: hidden;
  }
  
.item blockquote {

    border-left: 5px solid #333;

    margin: 0;

}

.item blockquote img {

    margin-bottom: 10px;

    width: 100px;

    height: 100px;

}

.item blockquote p:before {

    content: "\f10d";

    font-family: 'Fontawesome';

    float: left;

    margin-right: 10px;

}

/*------------------------------------------------------

                Start Contact

--------------------------------------------------------*/

/* Width For After In Contact*/

.contact  h2:before{

    content: "";

    position: absolute;

    border-width: 1px;

    padding-left: 217px;

    border-color: transparent transparent #333;

    padding-bottom: 12px;

    margin-top: 25px;

    border-style: solid;

}

.contact form .btn-pr{

    background: #2c2c2c;

    color: #fff;

    padding: 10px 56px;

    font-size: 18px;

}

/* bootstrap Contact */

.form-control {

   resize: none;

    height: 53px;

    margin-bottom: 25px;

    border: none;

    box-shadow: none;

    border-radius: 0;

    border-bottom: 1px solid #333;

}

.form-control:focus {

     border-color: #333;

    outline: 0;

    -webkit-box-shadow: none;

     box-shadow: none; 

}

/*-------------------------------------------------------

                 End Contact 

--------------------------------------------------------*/



/*------------------------------------------------------

                 Start footer

--------------------------------------------------------*/

footer{

    background: #333;

    color: #fff;

    padding: 76px 0;

}

footer p{

    font-size: 15px;

    max-width: 62%;

    text-align: center;

    margin: 0 auto;

    color: #eee;

}

footer p span {

    color:#f9f9f9;

    text-decoration:underline;

}

footer p span:hover {

    color:#DDD;

    cursor: pointer;

}

.icon-top{

    position: fixed;

    top: 89%;

    font-size: 20px;

    right: 10px;

    background: rgba(51, 51, 51, 0.62);

    display: none;

    border-radius: 50%;

    color: #fff;

}

.icon-top:hover{

    color: rgb(173, 171, 171);

}

/*-------------------------------------------------------

                  End footer

--------------------------------------------------------*/



/*------------------------------------------------------

                Start General

--------------------------------------------------------*/

.about,

.portfolio, 

.contact,

.service{

    padding-top: 100px;

    padding-bottom: 100px;

}

.service,

.TESTIMONIALS{

    background: #000000;

}

p{

    font-size: 16px;

    color: #222;

    line-height: 35px;

    letter-spacing: 1px;

}





/* All Title For Site  */

.row{

    padding: 20px 0px;

}

.service .container h2 ,

.portfolio .container h2,

.contact  h2{

    font-size: 28px;

    letter-spacing: 5px;

    margin: 15px 0px 65px 0px;

    font-family: 'Roboto Condensed', sans-serif;

    font-weight: bolder;

    text-transform: uppercase;

}

.contact form .btn-pr:hover,

.btn-pr:hover{

    background: rgba(255, 255, 255, 0.44);

    color: #333;

    border: 1px solid #333;

}

/*-----------------------------------------------------------

                        End General 

------------------------------------------------------------- */



/*------------------------------------------------------------

                        Start Loading 

--------------------------------------------------------------*/

.loading-scroll-hiden{

    overflow-y: hidden;

}

.body{

    position: fixed;

    width: 100%;

    height: 100%;

    background: #fdfdfd;

    z-index: 9999;

    display: table;

}

.center{

    display: table-cell;

    vertical-align: middle;

}

.loader{

    width: 250px;

    height: 250px;

    border-radius: 50%;

    background: #333;

    margin: 50px auto;

    position: relative;

}

.loader:after{

    content: "LOADING...";

    width: 250px;

    position: absolute;

    top: 150px;

    left: 0;

    font-weight: 700;

    color: #333;

    text-align: center;

}

.loader:before{

    content: "";

    width: 252px;

    height: 126px;

    background: #fdfdfd;

    position: absolute;

    top: 125px;

    left: -1px;

}

.loader-inner-2{

    width: 190px;

    height: 190px;

    border-radius: 50%;

    background: #fdfdfd;

    position: relative;

    top: 30px;

    left: 30px;

    -webkit-animation: loading-1 .5s ease-in-out alternate infinite;

    animation: loading-1 .5s ease-in-out alternate infinite;

}

.loader-inner-1{

    width: 250px;

    height: 250px;

    border-radius: 50%;

    position: absolute;

    left: 0;

    top: 0;

    -webkit-animation: loading-2 1s ease-in-out alternate infinite;

    animation: loading-2 1s ease-in-out alternate infinite;

}

.loader-inner-1:after{

    content: "";

    width: 252px;

    height: 126px;

    background: #fdfdfd;

    position: absolute;

    top: 125px;

    left: -1px;

}

@keyframes loading-1{

    0%{

        width: 190px;

        height: 190px;

        top: 30px;

        left: 30px;

    }

    100%{

        width: 244px;

        height: 244px;

        top: 3px;

        left: 3px;

    }

}



@keyframes loading-2{

    0%{

        transform: rotate(160deg);

    }

    100%{

        transform: rotate(-160deg);

    }

}



/*-------------------------------------------------------------

                      End Loading

---------------------------------------------------------------*/

/***********************

    Start Switch

************************/

.switch{

    top: 20%;

    width: 5%;

    position: absolute;

    height: 224px;

    background-color: transparent;

}

.container-switch,

.icon-switch{

    top: 20%;

    position: absolute;

    transition: all .6s ease-in-out;

    cursor: pointer;

}

.container-switch{

    width: 0;

    height: 170px;

    background: #fff;

    border: 1px solid #fff;

    

}

.icon-switch{

    display: inline-block;

    margin-left: 2px;

    background: #333;

    padding: 3px 10px;

}

.icon-switch a i{

     color: #fff;

    font-size: 24px;

    padding: 5px 0;

}

.container-switch #div2{

    background: #DC143C;

    height: 25%;

}

.container-switch #div3{

    background: #ffd700;

    height: 25%;

}

.container-switch #div4{

    background: #94df43;

    height: 25%;

}

.container-switch #div5{

    background: #2daee0;

    height: 25%;

}

#particles-container {
    position: relative;
    width: 100%;
    height: 100vh;
  }
  
  #home {
    position: relative;
    z-index: 1;
  }
  
  #particles-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  
  #video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
  




/***********************

    End switch

************************/